<template>
	<view class="home-content">
		<view class="title-text">初吻</view>
	</view>
</template>

<script>
	export default {
		onLoad() {
			
		},
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.home-content {
		height: 100%;
		position: relative;
		background-color: #cde0b7;
	}

	.title-text {
		color: $green-bg-color;
		position: absolute;
		font-size: 180rpx;
		width: 180rpx;
		top: 50%;
		right: 50%;
		transform: translate(50%, -50%);
		text-shadow: -30rpx 20rpx 5px rgba(0,0,0,0.2);
		animation: textShadow;
		animation-duration: 0.8s;
	}
	
	@keyframes textShadow {
		0%{
			text-shadow: 0 0 5px rgba(0,0,0,0.2);
		}
		100%{
			text-shadow: -30rpx 20rpx 5px rgba(0,0,0,0.2);
		}
	}
</style>